<template>
    <div class="gold-shop-wrap">
        <van-nav-bar :title="ids == 0 ? '新增银行卡' : '编辑银行卡'" left-arrow fixed @click-left="onClickLeft" />
        <div>
            <van-cell-group>
                <van-field clearable v-model="formData.name" label="姓名" placeholder="请输入姓名" input-align="right" />
                <van-field clearable v-model="formData.identity_card_no" label="身份证" placeholder="请输入身份证" input-align="right" />
                <van-field clearable v-model="formData.bank_no" label="银行卡" placeholder="请输入银行卡号" input-align="right" />
                <van-field clearable v-model="formData.bank_name" label="开户行" placeholder="请输入开户行"
                    input-align="right" />
                <van-field clearable v-model="formData.branch_name" label="开户行支行" placeholder="请输入开户行支行"
                    input-align="right" />
                <van-field clearable v-model="formData.phone" label="手机号" placeholder="请输入手机号" input-align="right" />
            </van-cell-group>
        </div>
        <div class="bind_title">
            <span>{{ title }}</span>
            <br>
            <br>
            <div v-html="content.replace(/\n/g, '<br><br>')"></div>
            <!-- 1.姓名，身份证和银行卡的信息必须在同一个人名下，否则会导致提现失败；
            <br>
            <br>
            2.同一个人，名下所属的银行卡单月最高提现9W，如需更多额度，请更换不同的身份和银行卡信息进行提现：
            <br>
            <br>
            3.请确认您填写的信息准确无误，否则因自身填写错误无法到账，由本人自己承担！ -->
        </div>
        <div style="margin: 16px;margin-top: 0.92rem;">
            <van-button color="linear-gradient( 90deg, #4A89EC 0%, #1261E2 100%)" round block type="info"
                @click="submit">保存</van-button>
        </div>
    </div>
</template>
<script>
import { BANK_CARD_CREATE ,BANK_CARD_UPDATE,BANK_CARD_INFO,BANK_CARD_CONFIG} from "@/api/mine";
import getBindList from './bind'
import { times } from "uview-ui/libs/function/digit";
export default {
    data() {
        return {
            ids: "",
            formData: {},
            title:"",
            content:""
        };
    },
    mounted() {
        window.scrollTo(0, 0)
        this.bindList = getBindList
        this.ids = this.$route.query.id;
        document.title = this.$route.query.id == 1 ? "新增银行卡" : "编辑银行卡";
        this.$http.get(BANK_CARD_CONFIG).then(res=>{
            this.title=res.data.intro.title
            this.content=res.data.intro.content
        })
        if (this.ids != 0) {
            this.$http.get(BANK_CARD_INFO+this.ids).then(res => {
                this.formData = {
                    name: res.data.info.name,
                    identity_card_no: res.data.info.identity_card_no,
                    bank_no: res.data.info.bank_no,
                    bank_name: res.data.info.bank_name,
                    branch_name: res.data.info.branch_name,
                    phone: res.data.info.phone,
                    default_flag: res.data.info.default_flag
                }
            })
        } else {
            this.formData = {}
            this.formData.default_flag=0
        }
    },
    methods: {
        onClickLeft() {
            this.$router.back();
        },
        submit() {
            if (this.formData.name == "") {
                this.$toast("请输入姓名");
                return;
            }
            if (this.formData.identity_card_no == "") {
                this.$toast("请输入身份证");
                return;
            }
            if (this.formData.bank_no == "") {
                this.$toast('请输入银行卡号');
                return;
            }
            if (this.formData.bank_name == "") {
                this.$toast("请输入开户行");
                return;
            }
            if (this.formData.branch_name == "") {
                this.$toast("请输入开户支行");
                return;
            }
            if (this.formData.phone == "") {
                this.$toast("请输入手机号");
                return;
            }
            
            let api=this.ids==0?BANK_CARD_CREATE:BANK_CARD_UPDATE
            this.formData.id=this.ids
            this.$http.post(api, this.formData).then((res) => {
                if (res.code == 200) {
                    this.$toast("成功");
                    this.$router.back();
                } else {
                    this.$toast(res.msg);
                }
            });
        },
    },
};
</script>
<style less="scss" scoped>
.gold-shop-wrap {
    min-height: 100vh;
    padding-top: 46px;
}

::v-deep .van-nav-bar .van-icon {
    color: #333333;
}

::v-deep .van-nav-bar__arrow {
    font-size: 20px;
}

.bind_title {
    width: 95%;
    margin: 0.32rem auto;
    font-size: 0.24rem;
    color: #999;

    span {
        color: #333;
        font-size: .28rem;
        font-weight: 500;
    }
}
</style>